/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      article_lists
 * @Description:    展示文章列表
 * @Author:         SuPeiSen
 * @CreateDate:     2021/2/19 10:18 下午
 * @UpdateDate:     2021/2/19 10:18 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import InfiniteScroll from 'react-infinite-scroller';
import React from 'react';
import {
  BlogArticleItemType,
  BlogArticleTag,
} from '@/type/blog/blog_article_type';
import { Tag, Empty, Spin } from 'antd';
import { rgbaColorByString } from '@/utils/app_fun';
import { AppImageUrl } from '@/config/app_config';
import { BiCalendar } from 'react-icons/bi';
import { AiOutlineEye, AiOutlineForm } from 'react-icons/ai';

import './style/article.less';
import './phone_style/phone_article.less';
import './phone_style/phone_article_top.less';
import './phone_style/phone_aritcle_bottom.less';
import './style/article_bottom.less';
import './style/article_top.less';
import {
  pushArticle,
  pushArticleByParma,
} from '@/pages/blog/article/article_list';

/**
 * 类型
 */
type ArticleListType = 'phone' | 'pc';

/**
 * 定义文章列表
 */
interface ArticleListProps {
  type: ArticleListType; // 显示样式类型
  pageStart: number;
  loadMore: (page: number) => void;
  hasMore: boolean;
  articleList: Array<BlogArticleItemType>;
}

/**
 * 显示文章列表， InfiniteScroll上拉加载更多组件
 * @param props
 * @constructor
 */
export const ArticleDataList = (props: ArticleListProps) => {
  // 文章列表
  const item = props.articleList.map((article) => {
    return (
      <div key={article.id}>
        <ArticleItem type={props.type} item={article} />
      </div>
    );
  });

  const loadMoreWidget = (
    <div className={'article_load_more'} key="loadMoreWidget">
      <Spin />
    </div>
  );

  // 电脑端文章
  const pcArticle = (
    <InfiniteScroll
      initialLoad={false}
      pageStart={props.pageStart}
      loadMore={props.loadMore}
      hasMore={props.hasMore}
      loader={loadMoreWidget}
    >
      {item}
    </InfiniteScroll>
  );

  // 手机端文章
  const phoneArticle = (
    <InfiniteScroll
      initialLoad={false}
      pageStart={props.pageStart}
      loadMore={props.loadMore}
      hasMore={props.hasMore}
      loader={loadMoreWidget}
    >
      {item}
    </InfiniteScroll>
  );

  switch (props.type) {
    // 电脑端
    case 'pc':
      return props.articleList.length === 0 ? <Empty /> : pcArticle;

    // 手机端
    case 'phone':
      return props.articleList.length === 0 ? <Empty /> : phoneArticle;
  }
};

/**
 * 每一个文章定义
 */
interface ArticleItemProps {
  type: ArticleListType; // 显示样式类型
  item: BlogArticleItemType; // 文章Type
}

/**
 * 每一个文章
 * @param props
 * @constructor
 */
const ArticleItem = (props: ArticleItemProps) => {
  const articleOriginate = props.item.article_originate === 1 ? '(原创)' : '';
  switch (props.type) {
    case 'phone':
      return (
        <div className="phone_article_item" key={props.item.id}>
          <ArticleTop
            type="phone"
            id={props.item.id}
            content={props.item.article_synopsis}
            imageUrl={props.item.article_image}
            tags={props.item.articleTag}
            title={`${articleOriginate}${props.item.article_title}`}
          />
          <ArticleBottom
            dateTime={props.item.add_time}
            readNum={props.item.article_read}
            commentary={0}
            type="phone"
            readAll={() => {
              pushArticle(props.item.id);
            }}
          />
        </div>
      );
    case 'pc':
      return (
        <div className="article_item" key={props.item.id}>
          <ArticleTop
            type="pc"
            id={props.item.id}
            content={props.item.article_synopsis}
            imageUrl={props.item.article_image}
            tags={props.item.articleTag}
            title={`${articleOriginate}${props.item.article_title}`}
          />
          <ArticleBottom
            dateTime={props.item.add_time}
            readNum={props.item.article_read}
            commentary={0}
            type="pc"
            readAll={() => {
              pushArticle(props.item.id);
            }}
          />
        </div>
      );
  }
};

// 显示Tag列表
const ArticleTag = (props: { tag: BlogArticleTag }) => {
  return (
    <Tag
      className="article_tag_click"
      key={props.tag.id}
      color={rgbaColorByString(props.tag.tag_color)}
      onClick={(event) => {
        pushArticleByParma({ tag_id: props.tag.id });
        event.stopPropagation();
      }}
    >
      {props.tag.tag_name}
    </Tag>
  );
};

// 文章Item头部
const ArticleTop = (props: {
  id: number;
  tags: Array<BlogArticleTag>;
  title: string;
  content: string;
  imageUrl: string;
  type: ArticleListType;
}) => {
  switch (props.type) {
    case 'phone':
      return (
        <div
          className="phone_article_top"
          onClick={() => {
            pushArticle(props.id);
          }}
        >
          <div className="phone_article_title">
            <span className="phone_article_top_title">{props.title}</span>
          </div>
          <div style={{ padding: '5px 4px' }}>
            {/*展示标签*/}
            {props.tags.map((tag) => (
              <ArticleTag tag={tag} key={tag.id} />
            ))}
          </div>
          <span className="phone_article_top_content">{props.content}</span>
        </div>
      );
    case 'pc':
      return (
        <div className="article_top_parent">
          {/*图片*/}
          <div className="article_top_parent_image">
            <img
              className="article_top_left_img"
              src={AppImageUrl(props.imageUrl)}
              alt="hello"
            />
          </div>
          <div className="article_top_right_parent">
            <div className="article_top_right_title">
              <span className="article_top_right_title">{props.title}</span>
              <div className="article_top_tags">
                {/*展示标签*/}
                {props.tags.map((tag) => (
                  <ArticleTag tag={tag} key={tag.id} />
                ))}
              </div>
            </div>
            <span className="article_top_right_content">{props.content}</span>
          </div>
        </div>
      );
  }
};

// 文章下部分
const ArticleBottom = (props: {
  type: ArticleListType;
  dateTime: string;
  readNum: number;
  commentary: number;
  readAll: () => void;
}) => {
  switch (props.type) {
    case 'phone':
      return (
        <div className="phone_article_bottom_main">
          <div className="phone_article_bottom_main_item">
            <BiCalendar />
            <span>{props.dateTime}</span>
          </div>
          <div
            className="phone_article_bottom_main_item"
            onClick={props.readAll}
          >
            <AiOutlineEye />
            <span className="phone_article_bottom_main_item_span">
              {props.readNum}
            </span>
            阅读次数
          </div>
          {/*<div className="phone_article_bottom_main_item">*/}
          {/*  <AiOutlineForm />*/}
          {/*  <span className="phone_article_bottom_main_item_span">*/}
          {/*  {props.commentary}*/}
          {/*</span>*/}
          {/*  条评论*/}
          {/*</div>*/}
        </div>
      );
    case 'pc':
      return (
        <div className="article_bottom_main">
          <div className="article_bottom_main_item">
            <BiCalendar />
            <span>{props.dateTime}</span>
          </div>
          <div className="article_bottom_main_item">
            <AiOutlineEye />
            <span>{props.readNum}阅读次数</span>
          </div>
          {/*<div className="article_bottom_main_item">*/}
          {/*  <AiOutlineForm />*/}
          {/*  <span>{props.commentary}条评论</span>*/}
          {/*</div>*/}
          <div
            className="article_bottom_main_last_item"
            onClick={props.readAll}
          >
            <i>阅读全文</i>
          </div>
        </div>
      );
  }
};
